<template>
  <div class="footer">
    <!-- 首页 -->
    <div class="fot" @click="changePath0" :class="ID === 0 ? 'active' : ''">
      首页
      <span v-show="ID === 0"></span>
    </div>
    <!-- 关注 -->
    <div class="fot" @click="changePath1" :class="ID === 1 ? 'active' : ''">
      关注
      <span v-show="ID === 1"></span>
    </div>
    <!-- ＋ -->
    <div class="jia" @click="jia">
      <span>+</span>
    </div>
    <!-- 信息 -->
    <div class="fot" @click="changePath2" :class="ID === 2 ? 'active' : ''">
      信息
      <span v-show="ID === 2"></span>
    </div>
    <!-- 我的 -->
    <div class="fot" @click="changePath3" :class="ID === 3 ? 'active' : ''">
      我的
      <span v-show="ID === 3"></span>
    </div>
  </div>
  <AsyncLogin />
  <AsyncUploadvideo />
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
let router = useRouter()
// 登录页面
const AsyncLogin = defineAsyncComponent(() => import('../../views/login-page.vue'))
// 上传视频页面
const AsyncUploadvideo = defineAsyncComponent(() => import('../../views/uploadvideo-page.vue'))
// 当前页面路径
const path = location.href
console.log(path);
// 当前页面的名字
const name = path.split('/')[path.split('/').length - 1]
console.log(name);
const ID = ref(0)
if (name === 'home') ID.value = 0
if (name === 'followed') ID.value = 1
if (name === 'message') ID.value = 2
if (name === 'my') ID.value = 3

// 去video页面
function changePath0() {
  if (localStorage.getItem('data')) {
    ID.value = 0
    router.push('/home')
  } else {
    login()
  }
}
// 去followed页面
function changePath1() {
  if (localStorage.getItem('data')) {
    ID.value = 1
    router.push('/followed')
  } else {
    login()
  }
}
// 去message页面
function changePath2() {
  if (localStorage.getItem('data')) {
    ID.value = 2
    router.push('/message')
  } else {
    login()
  }
}
// 去my页面
function changePath3() {
  if (localStorage.getItem('data')) {
    ID.value = 3
    router.push('/my')
  } else {
    login()
  }
}

// 去登录页面弹出
function login() {
  document.querySelector('.login').style.transform = 'translateY(0)';
}

// 加号
function jia() {
  if (localStorage.getItem('data')) {
    document.querySelector('.uploadvideo').style.transform = 'translateX(0)';
  } else {
    login()
  }
}
</script>

<style lang="scss" scoped>
$width: 100%;

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: $width;
  height: 41px;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #fff;
  font-size: 15px;
  z-index: 15;

  .fot {
    position: relative;
    height: 20px;
    color: #8b8c96;

    span {
      position: absolute;
      bottom: 0;
      margin-bottom: -6px;
      left: 0;
      width: 20px;
      margin-left: 5px;
      height: 2px;
      background-color: #fff;
    }
  }

  .active {
    color: #fff;
  }

  .jia {
    padding: 5px 15px;
    border-radius: 5px;
    color: #000;
    line-height: 20px;
    background-color: #fff;

    span {
      font-weight: 600;
    }
  }
}
</style>